<script setup lang="ts">
import { FormProps } from "@/views/hooks";
import { onMounted, ref } from "vue";
import { getRoleList, getUserRoles, Role } from "@/api/system";

const props = withDefaults(defineProps<FormProps<any>>(), {
  formInline: () => ({
    userId: "",
    role: []
  })
});
const newFormInline = ref(props.formInline);
const roles = ref<Array<Role>>([]);
const loadFlag = ref<boolean>(true);
const loadFlag2 = ref<boolean>(true);

onMounted(() => {
  getUserRoles(newFormInline.value.userId).then(res => {
    newFormInline.value.role = res;
    loadFlag.value = false;
  });
  getRoleList({ current: 0, size: 10 }).then(res => {
    roles.value = res.records;
    loadFlag2.value = false;
  });
});
</script>

<template>
  <div v-loading="loadFlag && loadFlag2">
    <el-checkbox-group v-model="newFormInline.role">
      <el-checkbox v-for="item in roles" :key="item.id" :label="item.id">
        {{ item.name }}
      </el-checkbox>
    </el-checkbox-group>
  </div>
</template>
